<template>
    <div>
        <div class="main_container">
            <div class="banner-box">
                <img src="http://www.ecdo.net/public/images/ca/2e/7e/e057f72e1da2ee7effc06029be76e35f241e944d.png?1500263971#w" alt="" class="banner-img">
            </div>
            <div class="content">
                <div class="section1">
                    <div>
                        <div class="lists" v-for="cat in cates" @click="goCate(cat.id)" :data-cid="cat.id">
                            <button v-bind:class="{isActive:cat.id==idx}">{{cat.name}}</button>
                        </div>
                    </div>
                    <div>
                        <div class="lists" v-for="tag in tags" @click="goTag(tag.id)" :data-tid="tag.id">
                            <button v-bind:class="{isCurrent:tag.id==cur}">{{tag.name}}</button>
                        </div>
                    </div>
                </div>
                <div class="section3">
                    <ul class="case-box">
                        <li v-for="item in cases">
                            <router-link :to="{path:'/detail',query:{id: item.id}}">
                                <img :src="item.pc_thumb" alt="" class="case-img">
                            </router-link>
                            <!--<h3 class="case-title">{{list.title}}</h3>-->
                            <p class="case-detail">
                                <!--<template v-for="v in list.tages">-->
                                    <!--<span>{{v}}</span>-->
                                <!--</template>-->
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data () {
            return {
                lists:[ ],
                activeIndex: '1',
                isDisplay: false,
                articles:[ ],
                cates:[ ],
                tags:[ ],
                cases:[ ],
                reload: this.load,
                id: '',           /* 分类的id*/
                detail_id:'',    /*传到详情的id*/
                idx:0,
                cur:0
            }
        },
        methods: {
            handleSelect(key, keyPath) {
            },
            handleScroll(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop>70){
                    this.isDisplay=true;
                }else{
                    this.isDisplay=false;
                }
            },
            load(){
                var that=this;
                that.id= that.$route.query.id;
            },
            getCategory(){
                var that=this;
                 console.log(that.id);
                that.$http({
                    method: 'GET',
                    url: "/ecdo/cases?cat_id="+that.id
                }).then(function(res){
                    console.log(res);
                    that.cates=res.data.cat;
                    that.tags=res.data.tags;
                    that.cases=res.data.cases;
                    that.detail_id=res.data.cases.id;
                },function(error){
                    console.log(error);
                })
            },
            goCate(e){
                var that=this;
                console.log(e);
                that.idx=e;
                //  console.log(that);
                that.$http({
                    method: 'GET',
                    url: "/ecdo/cases?cat_id="+that.idx
                }).then(function(res){
                    console.log(res);
                    that.cates=res.data.cat;
                    that.tags=res.data.tags;
                    that.cases=res.data.cases;
                    that.detail_id=res.data.cases.id;

                },function(error){
                    console.log(error);
                })
            },
            goTag(e){
                var that=this;
                console.log(e);
                that.cur=e;
                that.$http({
                    method: 'GET',
                    url: "/ecdo/cases?cat_id="+that.cur
                }).then(function(res){
                    console.log(res);
                    that.cates=res.data.cat;
                    that.tags=res.data.tags;
                    that.cases=res.data.cases;
                    that.detail_id=res.data.cases.id;
                },function(error){
                    console.log(error);
                })
            }
        },
        created(){
            this.getCategory();
        },
        mounted(){
            window.addEventListener('scroll',this.handleScroll);
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    P{
        margin-bottom: 0;
    }

    .main_container{
        width:100%;
        background-color: #eee;
    }
    .banner-box{
        width: 100%;
        margin:0 auto;
    }
    .banner-img{
        width: 100%;
    }
    .lists{
        width: 100px;
        float: left;
        margin-left: 22px;
        margin-top: 17px;
        margin-bottom: 17px;
        cursor: pointer;
    }
    .lists button{
        font-size: 12px;
        line-height: 36px;
        text-align: center;
        color: black;
        background-color: #f4f4f4;
        width: 100px;
        margin: 0;
        cursor: pointer;
        border: none;
        outline: none;
        padding: 0;
    }
    .content{
        width: 1000px;
        position: relative;
        margin: 0 auto;
        z-index: 200;
    }
    .section1{
        display: flex;
        flex-direction: column;
        margin-top: -70px;
        background-color: #FFF;
    }
    .section3 ul{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .section3 ul li{
        width: 50%;
        position: relative;
        margin-bottom: 10px;
    }
    .case-box li:nth-child(2n+1){
        padding-right: 5px;
    }
    .case-box li:nth-child(2n){
        padding-left: 5px;
    }
    .case-img{
        width: 100%;
    }
    .case-title{
        position: absolute;
        bottom: 100px;
        padding: 0 50px;
        text-align: center;
        color: #fff;
    }
    .case-detail{
        position: absolute;
        bottom: 50px;
        padding: 0 50px;
        color: #fff;
        font-size: 12px;
    }
    .case-detail span:first-child {
        background-color: #000;
        padding: 5px 10px;
    }
    .case-detail span:last-child {
        background-color: #4F5B69;
        padding: 5px 10px;
    }
    .lists .isActive,.lists .isCurrent{
        background-color: #000;
        color: #fff;
    }
</style>
